<template>
	<view class="sign-detail">
		<!-- 积分抽奖 -->
		<view class="lottery-box" @click="goLottery">
			<image class="lottery-img" src="https://biapi.vaubang.cn/UploadFiles/Images/lottery-img.png"
				mode="widthFix"></image>
		</view>
		<view class="sign-bg"></view>

		<view class="sign-integral-box">
			<view class="sign-integral-title">当前积分</view>
			<view class="integral-num">{{userIntegral}}</view>
		</view>

		<view class="sign-list">
			<view class="sign-desc-text">
				<text>已连续签到</text>
				<text class="sign-day-text">{{signNum}}天</text>
			</view>

			<!-- <view class="sign-detail-main">
				<view class="sign-detail-day-item" :class="{'current-day': item.isCurrentDay}"
					v-for="(item, index) in signList" :key="index">
					<text class="integral" v-if="index < 6">20积分</text>
					<text class="integral" v-else>100积分</text>
					<image class="sign-selected-icon"
						:src="item.isSignIn == 1 ? '../../static/sign-selected.png': '../../static/sign-icon.png'">
					</image>
					<text class="day-text">{{item.signDay}}</text>
				</view>
			</view> -->

			<view class="sign-detail-main">
				<view class="sign-item" :class="{'signed': item.isSignIn == 1}" v-for="(item, index) in signList"
					:key="index">
					<view class="sign-item-top" v-if="item.isSignIn == 0">
						<text v-if="index < 6">+20</text>
						<image v-else class="gift-img" src="../../static/sign/gift.png"></image>
					</view>
					<view class="sign-item-top" v-else>
						<van-icon class="success-icon" name="success" />
					</view>
					<view class="sign-item-bottom" v-if="index == 0">周一</view>
					<view class="sign-item-bottom" v-else-if="index == 1">周二</view>
					<view class="sign-item-bottom" v-else-if="index == 2">周三</view>
					<view class="sign-item-bottom" v-else-if="index == 3">周四</view>
					<view class="sign-item-bottom" v-else-if="index == 4">周五</view>
					<view class="sign-item-bottom" v-else-if="index == 5">周六</view>
					<view class="sign-item-bottom" v-else-if="index == 6">周日</view>

					<image v-if="index == 6" class="sign-tip-text" src="../../static/sign/sign-tip-text.png"
						mode="widthFix"></image>
				</view>
			</view>

			<view class="sign-btn" @click.stop="onClickSign" v-if="!isSign">点击签到</view>
			<view class="is-signed" v-else>今日已签到</view>
		</view>

		<view class="sign-detail-record">
			<view class="sign-detail-item" @click.stop="goIntegralDetail">
				<image class="sign-item-img" src="../../static/sign/sign-item1.png"></image>
				<text class="sign-item-text">积分明细</text>
			</view>
			<view class="sign-record-item" @click.stop="goExchange">
				<image class="sign-item-img" src="../../static/sign/sign-item2.png"></image>
				<text class="sign-item-text">抽奖记录</text>
			</view>
		</view>

		<view class="sign-rule-box">
			<view class="sign-rule-title">积分规则</view>
			<view class="sign-rule-desc">
				<p>1.每次抽奖消耗99积分，每日抽奖次数不限</p>
				<p>2.每次抽奖历史记录请点击【抽奖记录】进行查看</p>
				<p>3.抽奖获得的实物奖品后台会在7天内进行处理并邮寄，具体到货时间以物流为准</p>
				<p class="phone-item">5.联系客服(点击号码可直接拨打电话)<view class="phone" @click.stop="callPhone('18975157865')">
						客服1号：<text style="color: #008aff;">18975157865</text></view>
					<view class="phone" @click.stop="callPhone('13874983748')">
						客服2号：<text style="color: #008aff;">13874983748</text>
					</view>
				</p>
			</view>
		</view>
	</view>
</template>

<script>
	import getDateTime from '@/common/getDateTime.js';
	import apiRqs from '@/api/api-request.js';
	export default {
		data() {
			return {
				userIntegral: 0,
				isSign: false,
				signNum: 0,
				signList: [],
			}
		},
		onLoad() {
			this.getUserIntegral();
			this.handleGetWeekSignList();
		},
		methods: {
			// 点击签到
			onClickSign() {
				var that = this;
				getApp().showLoading();
				apiRqs._handleSign().then((res) => {
					uni.hideLoading();
					console.log('今日签到结果', res);
					if (res.code == 200) {
						getApp().showToast('签到成功');
						setTimeout(() => {
							that.handleGetWeekSignList();
							that.isSign = true;
						}, 1000)
					} else {
						getApp().showToast(res.msg);
					}
				})
			},
			goIntegralDetail() {
				uni.navigateTo({
					url: "/packageA/workbench/integral-detail"
				})
			},
			goExchange() {
				uni.navigateTo({
					url: "/packageA/workbench/sign-exchange"
				})
			},
			// 获取本周签到情况
			handleGetWeekSignList() {
				getApp().showLoading();
				let currentDay = getDateTime.getDay(0);
				apiRqs._getCurrentWeekSignDetail().then((res) => {
					uni.hideLoading();
					console.log('本周签到情况', res);
					if (res.code == 200) {
						let newData = JSON.parse(JSON.stringify(res.data));
						let signNum = 0;
						for (let i = 0; i < newData.length; i++) {
							newData[i].signDay =
								`${newData[i].signInDate.split("-")[1]}-${newData[i].signInDate.split("-")[2]}`;
							if (newData[i].isSignIn == 1) {
								signNum++;
							}
							if (currentDay == newData[i].signInDate) {
								newData[i].isCurrentDay = true;
								if (newData[i].isSignIn == 1) {
									this.isSign = true;
								} else {
									this.isSign = false;
								}
							}
						}
						this.signNum = signNum;
						this.signList = newData;
					}
				})
			},

			// 获取个人积分
			getUserIntegral() {
				apiRqs._getUserIntegral().then((res) => {
					console.log('个人积分', res);
					if (res.code == 200) {
						this.userIntegral = res.data;
					} else {
						getApp().showToast(res.msg);
					}
				})
			},

			// 拨打电话
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},

			// 进入积分抽奖入口
			goLottery() {
				uni.navigateTo({
					url: "/packageA/workbench/integral-lottery"
				})
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #f5f5f5;
	}

	.sign-detail {
		.lottery-box {
			position: fixed;
			right: 10px;
			bottom: 80px;
			box-sizing: border-box;
			z-index: 99;
			animation: doudong 5s ease-in-out infinite;
			animation-direction: alternate;

			.lottery-img {
				width: 60px;
			}
		}

		.sign-bg {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 185px;
			background-image: url("https://biapi.vaubang.cn/UploadFiles/Images/sign-bg.png");
			background-repeat: no-repeat;
			background-size: 160%;
			background-position: -118px -155px;
			background-color: transparent;
			z-index: -1;
		}

		.sign-integral-box {
			margin-top: 35px;
			margin-left: 20px;

			.sign-integral-title {
				font-size: 14px;
				color: #fff;
			}

			.integral-num {
				font-size: 30px;
				color: #fff;
				font-weight: 600;
				margin-top: 5px;
			}
		}

		.sign-list {
			background-color: #fff;
			border-radius: 10px;
			margin: 20px 20px 0 20px;
			padding: 20px;
			box-sizing: border-box;

			.sign-desc-text {
				font-size: 15px;
				color: #000;
				font-weight: 500;

				.sign-day-text {
					color: #008aff;
				}
			}

			.sign-detail-main {

				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 15px;

				.sign-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin: 0 5px;
					position: relative;

					.sign-tip-text {
						position: absolute;
						width: 94rpx;
						height: 74rpx;
						right: -16rpx;
						top: -80rpx;
						z-index: 99;
					}

					.sign-item-top {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background-color: #fff;
						box-shadow: 0 0 2px #008aff;
						color: #888;
						font-size: 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;


						.gift-img {
							width: 40rpx;
							height: 40rpx;
							animation: doudong 2s ease-in-out infinite;
							animation-direction: alternate;
						}


					}

					.sign-item-bottom {
						font-size: 20rpx;
						color: #333;
						margin-top: 8px;
						font-weight: 500;
					}

					&.signed {
						.sign-item-top {
							background-color: #008aff;
							color: #fff;
							font-size: 32rpx;
						}
					}
				}

				.sign-detail-day-item {
					width: 48px;
					background: linear-gradient(180deg, #FFFFFF 0%, #DCF0FF 100%);
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					border-radius: 4px;
					padding: 5px;
					margin: 0 6px;
					box-sizing: border-box;
					margin-top: 6px;

					&.current-day {
						border: 2px solid #DCF0FF;
					}

					.integral {
						font-size: 10px;
						color: rgba(0, 0, 0, 0.5);
					}

					.sign-selected-icon {
						width: 22px;
						height: 22px;
						margin-top: 3px;
					}

					.day-text {
						font-size: 10px;
						font-weight: 500;
						color: rgba(0, 138, 255, 0.5);
						margin-top: 3px;
					}
				}
			}

			.sign-btn {
				width: 100%;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background-color: #008aff;
				color: #fff;
				border-radius: 4px;
				margin-top: 20px;
				font-size: 14px;

				&:active {
					background-color: #0076DB;
				}
			}

			.is-signed {
				width: 100%;
				height: 40px;
				line-height: 40px;
				text-align: center;
				color: #fff;
				border-radius: 4px;
				margin-top: 20px;
				font-size: 14px;
				background-color: rgba(0, 0, 0, 0.1);
			}
		}

		.sign-detail-record {
			display: flex;
			align-items: center;
			margin: 20px 20px 0 20px;

			.sign-detail-item,
			.sign-record-item {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px 20px 10px 15px;
				box-sizing: border-box;
				background-color: #fff;
				border-radius: 4px;

				&:active {
					background-color: #E9F5FF;
				}

				.sign-item-img {
					width: 40px;
					height: 40px;
				}

				.sign-item-text {
					font-size: 15px;
					color: #000;
					font-weight: 500;
				}
			}

			.sign-record-item {
				margin-left: 20px;
			}
		}

		.sign-rule-box {
			margin: 20px;

			.sign-rule-title {
				font-size: 14px;
				color: #000;
				font-weight: 500;
			}

			.sign-rule-desc {
				font-size: 12px;
				color: rgba(0, 0, 0, 0.5);
				margin-top: 10px;

				p {
					margin-top: 5px;

					.phone {
						margin-top: 10px;
					}
				}
			}
		}
	}

	@keyframes doudong {
		0% {
			transform: scale(1);
			transform: rotate(-8deg);
			/*开始为原始大小*/
		}

		25% {
			transform: scale(1.08);
			transform: rotate(8deg);
			/*放大1.1倍*/
		}

		50% {
			transform: scale(1);
			transform: rotate(-8deg);
		}

		75% {
			transform: scale(1.08);
			transform: rotate(8deg);
		}
	}
</style>
